<template>
  <div class="exhibits-box">
    <titles :title="props.info.text" />
    <div
      class="exhibits-text hw-wrap-spase"
      :style="{
        fontSize: store.styleInfo.contentSize,
        fontFamily: store.styleInfo.textFamily,
        color: store.styleInfo.fontColor,
      }"
    >
      {{ props.info.remarks }}
    </div>
    <div
      v-for="(item, index) in props.tabDatas"
      :key="item?.id"
      class="exhibits-list"
      :style="{ background: store.styleInfo.auxiliaryColor }"
    >
      <div v-if="index % 2 == 0" class="item-box">
        <t-image
          class="item-left"
          src="http://101.34.143.36:8890/api/image/387939155165253"
          alt=""
          v-if="!item.coverUrl"
        />
        <t-image
          class="item-left"
          :src="$filters.getLinkUrl(item.coverUrl, '?imageView2/1/w/580/h/386/format/webp')"
          alt=""
          v-else
        />

        <div class="item-right">
          <span
            class="right-title1"
            :style="{
              fontSize: store.styleInfo.mintitleSize,
              fontFamily: store.styleInfo.textFamily,
              color: store.styleInfo.fontColor,
            }"
            >{{ item.name }}</span
          >
          <span
            :style="{
              fontSize: store.styleInfo.contentSize,
              fontFamily: store.styleInfo.textFamily,
              color: store.styleInfo.fontColor,
            }"
            class="text-ov-hid-style"
          >
            {{ item.description }}
          </span>
          <div
          style="cursor: pointer;"
            @click="pathInfo(item.id)"
            :style="{
              fontFamily: store.styleInfo.fontFamily,
              fontSize: store.styleInfo.mintitleSize,
              color: '#fff',
            }"
            class="left-btn flex-c-c-c"
          >
            <div class="btn-img">
              <buttonIcon />
            </div>
            <span>查看展品</span>
          </div>
        </div>
      </div>
      <div v-else class="item-box">
        <div class="item-right">
          <span
            class="right-title1"
            :style="{
              fontFamily: store.styleInfo.fontFamily,
              color: store.styleInfo.fontColor,
            }"
            >{{ item.name }}</span
          >
          <span
            :style="{
              fontFamily: store.styleInfo.fontFamily,
              color: store.styleInfo.fontColor,
            }"
            class="text-ov-hid-style"
            >{{ item.description }}</span
          >
          <div
          style="cursor: pointer;"
            @click="pathInfo(item.id)"
            :style="{
              fontFamily: store.styleInfo.fontFamily,
              fontSize: store.styleInfo.mintitleSize,
              color: '#fff',
            }"
            class="left-btn flex-c-c-c"
          >
            <div class="btn-img">
              <buttonIcon />
            </div>
            <span>查看展品</span>
          </div>
        </div>
        <t-image
          class="item-left"
          src="http://101.34.143.36:8890/api/image/387939155165253/h_386,w_580"
          alt=""
          v-if="!item.coverUrl"
        />
        <t-image
          class="item-left"
          :src="$filters.getLinkUrl(item.coverUrl, '?imageView2/1/w/580/h/386/format/webp')"
          alt=""
          v-else
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { pathList, pathListLoop } from '../route';
import { urls } from '@/utils/request/upload';
import { useRouter, useRoute } from 'vue-router';
import titles from '@/components/title/title.vue';
import buttonIcon from '@/components/title/buttonIcon.vue';
import { handlemouse } from '@/utils/minxin';
import { onMounted } from 'vue';
import { useProjectStore } from '@/store';
import UnitImageNull from '@/components/unitImageNull/unitImageNull.vue';
const store = useProjectStore();
const router = useRouter();
const route = useRoute();

onMounted(() => {
  // handlemouse('scroll-box-hw2');
});
const props = defineProps({
  info: {
    type: Object,
  },
  tabDatas: {
    type: Array,
  },
});
const pathInfo = (e: number | unknown) => {
  router.push({
    path: route.meta.loopType ? pathListLoop[2] : pathList[2],
    query: { id: e, moduleId: props.info.id, projectId: localStorage.getItem('projectId') },
  });
};
</script>

<style lang="less" scoped>
@import './index.less';
.exhibits-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.exhibits-text {
  width: 50%;
  margin-bottom: 50px;
}
.exhibits-list {
  width: 100%;
  margin-bottom: 32px;
}
.item-box {
  display: flex;
  width: 100%;
}
.item-left {
  width: 46%;
  height: auto;
  img {
    width: 100%;
    height: auto;
  }
}
.item-right {
  display: flex;
  flex-direction: column;
  justify-content: center;

  flex: 1;
  padding: 80px 40px;
}
.right-title1 {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 32px;
}
.text-ov-hid-style {
  font-size: 16px;
  margin-bottom: 50px;
}
</style>
